import { list } from "@/apis/playWith";
import { Select } from "antd";
import { forwardRef, useEffect, useRef, useState } from "react";
import { LoadingOutlined } from '@ant-design/icons';
export default forwardRef((props: any, inputRef: any) => {
    const [value, setValue] = useState()
    const [orderList, setorderList] = useState<playWithDetailResult[]>([]);
    const [loading, setLoading] = useState(false);
    const [isFirst, setIsFirst] = useState(false);
    const timer = useRef<NodeJS.Timeout | undefined>();
    const handleSearch = (value: any) => {
        clearTimeout(timer.current);

        timer.current = setTimeout(async () => {
            setLoading(true);
            let res = await list({ playWithName: value, pageNum: 1, pageSize: 30 })
            setorderList(res.data.list || []);
            setLoading(false);
        }, 800)
    }
    useEffect(() => {
        setLoading(true);
        setValue(props.value);
        console.log(props.value)
        if (props.value && !isFirst && props.value instanceof Array) {
            setIsFirst(true);
            setorderList(props.value);
        }

    }, [props.value])
    return (
        <Select placeholder='请选择陪玩' mode="multiple" showSearch
            value={value}
            onSearch={handleSearch}
            ref={inputRef}
            allowClear
            notFoundContent={loading ? <LoadingOutlined /> : null}
            onChange={(v, o) => {
                console.log(v, o)
                setValue(v);
                setIsFirst(true);
                props.onChange && props.onChange(v, o);
            }}
            filterOption={false}>
            {
                orderList.map(({ playWithId, playWithName }) => {
                    return <Select.Option key={playWithId} value={playWithId}>{playWithName}</Select.Option>
                })
            }
        </Select>
    )
})